<template>
  <!-- el-submenu 是 Element UI 提供的子菜单组件，用于渲染有子菜单的菜单项 -->
  <el-submenu v-if="menu.menuType === 'M'" :index="menu.id.toString()">
    <template slot="title">
      <!-- 使用 iconfont 显示菜单项的图标 -->
      <i class="iconfont" :class="menu.icon?menu.icon : 'iconfeedback'"></i>
      <span>{{ menu.name }}</span>
    </template>
    <!-- 递归调用当前组件，渲染子菜单项 -->
    <menu-item v-for="item in menu.children" :key="item.id" :menu="item"></menu-item>
  </el-submenu>
  <!-- el-menu-item 是 Element UI 提供的单独菜单项组件 -->
  <el-menu-item :index="menu.path[0] === '/'?menu.path:'/'+menu.path" v-else @click="to(menu.path)">
    <!-- 使用 iconfont 显示菜单项的图标 -->
    <i class="iconfont" :class="menu.icon?menu.icon : 'iconfeedback'"></i>
    <span slot="title">{{ menu.name }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: "MenuItem",
  props: ['menu'], // 父组件传递的菜单数据
  methods: {
    to(url) {
      if (url[0] !== '/') url = '/' + url
      this.$router.push(url).catch(err => {
        err
      })
    }
  }
}
</script>

<style scoped>
/* 样式部分，仅在组件内生效 */
</style>
